<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>05_事件委托2</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }

      ul {
        width: 1000px;
        height: 16000px;
        background-color: pink;
        overflow: hidden;
      }

      li {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <!-- 
    事件委托的优势：
    1、节约内存：全局只有一个事件监听器对象
    2、方便管理：不委托时子元素动态增减，其绑定的事件监听器也要随之增减；
       PS:如果子元素已经移除，则其事件监听器也必须一并移除，否则会形成【内存泄露】
       PS:内存泄露：无用的对象充斥着内存，导致可用内存变少，程序越来越慢甚至崩溃；
     -->
    <script>
      // 揪出父元素
      var ul = document.querySelector("ul");

      /* 子元素（所有的li）将事件委托给父元素（ul）=> 事件委托 */
      // 给父元素一个人添加事件监听器
      ul.addEventListener("click", function (e) {
        /* 点击不同的末梢元素 有不同的处置方式 */
        // 点击LI时的处置方式
        if (e.target.nodeName === "LI") {
          // 打印li身上的文字
          console.log(e.target.innerText);
        }

        // 点击ul空白时的处置方式
        if (e.target.nodeName === "UL") {
          // 造一个新的Li出来
          var li = document.createElement("li");
          // li中写字：ul的子元素个数-1
          li.innerText = ul.children.length;
          // 将li丢入ul子元素的末尾
          ul.appendChild(li);
        }
      });
    </script>
  </body>
</html>
